<template>
  <view class="container">
    <view class="conLeft">
      <image :src="showObj?.url"></image>
    </view>
    <view class="conRight">
      <view class="textBox">
        <view class="itemText">
          5秒即将进入回答，请准备！
        </view>
      </view>
      <view class="yuYinBox">
        <view class="item item1"></view>
        <view class="item item2"></view>
        <view class="item item3"></view>
        <view class="item item4"></view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {onLoad} from "@dcloudio/uni-app";
import {getSessionStorage} from "@/utils";
const router = useRouter()
const route = useRoute()
const typeIndex = ref(0)
const showObj = ref()
//#ifdef APP-PLUS
onLoad((query)=>{
  console.log(query,'query')
  if(query){
    typeIndex.value = query.inkblot
    const showArr = getSessionStorage("inkblotList")
    showObj.value = showArr[typeIndex.value - 1]
    setTimeout(()=>{
      uni.navigateTo({url:`/pages/projectAnswer/projectAnswer?inkblot=${typeIndex.value}`})
    },5000)
  }
})
//#endif

//#ifdef H5
onMounted(()=>{
  console.log(route,'route')
  if(route.query){
    typeIndex.value = route.query.inkblot
  }
  const showArr = getSessionStorage("inkblotList")
  showObj.value = showArr[typeIndex.value - 1]
  setTimeout(()=>{
   router.push(`/pages/projectAnswer/projectAnswer?inkblot=${typeIndex.value}`)
  },5000)
})
//#endif
</script>


<style scoped lang="scss">
.container{
  width: 100%;
  height: 100%;
  background-image: url("@/static/image/project_answer_bg.png");
  background-size: 100% 100%;
  padding: 40rpx 36rpx 40rpx 60rpx;
  display: flex;
  gap: 50rpx;
  .conLeft{
    width: 336.18rpx;
    height: 336.18rpx;
    background: #FFFFFF;
    border: 3.9rpx solid #F2F2F2;
    border-radius: 13.65rpx;
    image{
      width: 100%;
      height: 100%;
    }
  }
  .conRight{
    margin-top: 10rpx;
    width: 254.67rpx;
    height: 307.32rpx;
    background: #FAFAFA;
    box-shadow: 0 0.78rpx 15.6rpx 0 #0000001a;
    border-radius: 9.36rpx;
    //filter: blur(3.9rpx);
    padding: 14rpx;
    position: relative;
    .textBox{
      .itemText{
        background: #F3F3F8;
        border: 1.17rpx solid #FFFFFF;
        border-radius: 15.6rpx 39rpx 39rpx 0;
        opacity: 0.9;
        font-weight: 600;
        font-size: 10.14rpx;
        color: #2B2944;
        letter-spacing: 0;
        padding: 10rpx;
        display: inline-block;
      }
    }
    .yuYinBox{
      position: absolute;
      bottom: 20rpx;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      justify-content: center;
      align-items: end;
      gap: 5rpx;
      .item{
        width: 5.85rpx;
        height: 14.43rpx;
        background: #DADAE5;
        border-radius: 6.44rpx;
      }
      .item2{
        height: 22.23rpx;
      }
      .item3{
        height: 26.52rpx;
      }
      .item4{
        height: 15.21rpx;
      }
    }
  }
}
</style>
